<template>
    <div class="app-container">
        <el-dialog title="订单详情" :visible.sync="loadings" width="1000px" append-to-body class="myclass">
            <el-descriptions title="订单信息" :column="2" border style="margin-top: 20px;color: #1890ff;">
                <el-descriptions-item label="订单编号">{{form.appletOrderCode}}</el-descriptions-item>
                <el-descriptions-item label="下单人昵称">{{form.appletUserName}}</el-descriptions-item>
                <el-descriptions-item label="下单人账号">{{form.appletUserId}}</el-descriptions-item>
                <el-descriptions-item label="下单时间">{{form.appletOrderTime}}</el-descriptions-item>
              <el-descriptions-item label="订单备注">{{form.appletOrderRemarks}}</el-descriptions-item>
            </el-descriptions>
          <div style="position:relative;" v-for="(item,index) in form.productDtos">
            <el-button type="primary" size="mini" class="goodsDetail" @click="checkGoods(item.productId)">商品信息</el-button>
            <el-descriptions :title="'商品信息'+(index+1)" :column="2" border style="margin-top: 20px;color: #1890ff;">
                <el-descriptions-item label="商品id">{{item.productId}}</el-descriptions-item>
                <el-descriptions-item label="商品名称">{{item.productName}}</el-descriptions-item>
                <el-descriptions-item label="规格id">{{item.variantId}}</el-descriptions-item>
                <el-descriptions-item label="规格名称">{{item.variantName}}</el-descriptions-item>
                <el-descriptions-item label="购买数量">{{item.orderProductAmount}}</el-descriptions-item>
                <el-descriptions-item label="规格售价">{{item.variantPrice}}元</el-descriptions-item>
              <el-descriptions-item label="商品总价">{{item.variantPrice*item.orderProductAmount}}元</el-descriptions-item>
            </el-descriptions>
          </div>
            <el-descriptions title="支付信息" :column="2" border style="margin-top: 20px;color: #1890ff;">
              <el-descriptions-item label="订单总价" >{{form.price}}元</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                  <dict-tag :options="dict.type.order_status" :value="form.appletOrderStatus" />
                </el-descriptions-item>
              <el-descriptions-item label="优惠券id" >{{form.appletUserCouponIds || '无'}}</el-descriptions-item>
              <el-descriptions-item label="优惠总价" >{{form.appletDiscountsMoney}}</el-descriptions-item>
                <el-descriptions-item label="支付时间">{{form.appletPayTime || '无'}}</el-descriptions-item>
              <el-descriptions-item label="支付金额" >{{form.appletOrderMoney}}元</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="快递信息" :column="2" border style="margin-top: 20px;color: #1890ff;">
                <el-descriptions-item label="快递公司">{{form.appletExpressCompany || '无'}}</el-descriptions-item>
                <el-descriptions-item label="快递单号">{{form.appletExpressCode || '无'}}</el-descriptions-item>
                <el-descriptions-item label="配送地址">{{form.appletUserName}} / {{form.appletUserPhone}} / {{form.appletDeliveryAddress}}</el-descriptions-item>
                <el-descriptions-item label="发货时间">{{form.appletDeliveryTime || '无'}}</el-descriptions-item>
                <el-descriptions-item label="签收时间">{{form.signTime || '无'}}</el-descriptions-item>
            </el-descriptions>
          <el-descriptions title="售后信息" :column="2" border style="margin-top: 20px;color: #1890ff;" v-if="form.afterList.length!=0">
            <el-descriptions-item label="售后原因">{{form.afterList[0].appletAfterReason || '无'}}</el-descriptions-item>
            <el-descriptions-item label="售后方式">{{form.afterList[0].appletAfterType==''?'无':form.afterList[0].appletAfterType=='160'?'仅退款':'退货退款'}}</el-descriptions-item>
            <el-descriptions-item label="退款金额">{{form.afterList[0].appletAfterMoney || '无'}}</el-descriptions-item>
          </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="loadings=false">确 定</el-button>
                <el-button @click="loadings=false">取 消</el-button>
            </div>
        </el-dialog>
      <!--    查看弹窗-->
      <el-dialog title="商品详情" :visible.sync="goodsDialog" width="800px" append-to-body class="myclass">
        <el-descriptions title="商品信息" :column="2" border style="margin-top: 20px;color: #1890ff;">
          <el-descriptions-item label="商品ID">{{goodsData.id}}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{goodsData.productName}}</el-descriptions-item>
          <el-descriptions-item label="所属分类">{{goodsData.categoryName}}</el-descriptions-item>
          <el-descriptions-item label="排序">{{goodsData.sort}}</el-descriptions-item>
          <el-descriptions-item label="销量">{{goodsData.sellCount}}</el-descriptions-item>
          <el-descriptions-item label="状态">{{goodsData.onShelfStatus?'上架':'下架'}}</el-descriptions-item>
          <el-descriptions-item label="上架时间">{{goodsData.onShelfDate}}</el-descriptions-item>

        </el-descriptions>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="商品介绍">{{goodsData.productDesc}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="备注">{{goodsData.remarks}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="商品规格" style="margin-top: 20px;color: #1890ff;">  </el-descriptions>
        <el-table
          :data="goodsData.productVariantsVos"
          style="width: 100%">
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="variantName"
            align="center"
            label="规格名称">
          </el-table-column>
          <el-table-column
            prop="costPrice"
            align="center"
            label="成本价">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            align="center"
            label="售价">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            align="center"
            label="规格图片">
            <template slot-scope="scope">
              <img style="width: 100px;height: 100px" :src="scope.row.imageUrl" alt="">
            </template>
          </el-table-column>
        </el-table>
        <div>
          <p class="check-tit">轮播图</p>
          <div>
            <el-image
              style="width: 100px; height: 100px;margin-right: 10px;"
              v-for="(item,index) in goodsData.productImagesCarouselVos"
              :key="index"
              :src="item.url">
            </el-image>
          </div>
          <p class="check-tit">详情图</p>
          <div>
            <el-image
              style="width: 100px; height: 100px;margin-right: 10px;"
              v-for="(item,index) in goodsData.productImagesDetailsVos"
              :key="index"
              :src="item.url">
            </el-image>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="goodsDialog=false">确 定</el-button>
          <el-button @click="goodsDialog=false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>


    export default {
        dicts: ['order_status'],
        data() {
            return {
              goodsData:{},
                // 遮罩层
                loadings: false,
              goodsDialog: false,
                form:{},
              appletOrderId:'',
              // 表单参数
              imgUrl:'http://img.tdfx.com.cn',

            };
        },
        created() {

        },
        methods: {
          checkGoods(id){
            selectByProductId(id).then(response => {

              this.goodsData=response.data
              for (let i=0;i<this.goodsData.productImagesCarouselVos.length;i++){
                this.goodsData.productImagesCarouselVos[i].url=this.imgUrl+this.goodsData.productImagesCarouselVos[i].imageUrl
              }
              for (let i=0;i<this.goodsData.productImagesDetailsVos.length;i++){
                this.goodsData.productImagesDetailsVos[i].url=this.imgUrl+this.goodsData.productImagesDetailsVos[i].imageUrl
              }
              for (let i=0;i<this.goodsData.productVariantsVos.length;i++){
                this.goodsData.productVariantsVos[i].imageUrl=this.imgUrl+this.goodsData.productVariantsVos[i].imageUrl
              }
              this.goodsDialog=true
            });
          },
            init(appletOrderId){
                this.loadings = true;
                this.appletOrderId = appletOrderId
                this.getList()
            },
            /** 查询人员信息列表 */
            getList() {
              let body={
                appletOrderId:this.appletOrderId
              }
              getAppletOrderDetails(body).then(response => {
                  this.form = response.data;
                  let price=0
                  for(let i=0;i<this.form.productDtos.length;i++){
                    price+=this.form.productDtos[i].variantPrice*this.form.productDtos[i].orderProductAmount
                  }
                  this.form.price=price
              });
            },

        }
    };
</script>
<style>
    .myclass .el-descriptions-item__label{
        width: 120px;
    }
    .goodsDetail{
      position: absolute;
      right: 0;
      top: 0;
    }
</style>
